<template>
  <a-spin :spinning="confirmLoading">
    <div class="container">
      <div class="auto">
        <div class="rule_wrap">
          <div class="pub_tit clearfix wow fadeInDown animated" data-wow-delay="0.1s">
            <!-- <a href="#" class="add fr">+ 新增</a> -->
            <a-button type="primary" class="fr" icon="plus" @click="addWorker" v-if="isShowBtnPersson()">新增</a-button>
          </div>
          <ul class="mem_list clearfix" v-if="worksList.length">
            <li class="item wow fadeInUp animated" data-wow-delay="0.1s" v-for="item in worksList" :key="item.id">
              <router-link :to="{path: '/worksShow/workDetail', query: {worksId: item.id}}">
                <a href="javascript:void(0);">
                  <div class="imgbox">
                    <img :src="item.worksImg" :alt="item.name" class="img"/>
                  </div>
                  <div class="info"  >
                    <h6 class="name" style="text-align: center">{{item.worksName}}</h6>
                    <div class="txt clamp">
                      <p>&nbsp;&nbsp; &nbsp; &nbsp; {{item.worksIntroduce}}</p>
                    </div>
                    <em class="arrow"></em>
                  </div>
                </a>
              </router-link>
            </li>
          </ul>

          <a-row v-if="worksList.length > 0" style="margin-top: 10px;">
            <a-col>
              <a-pagination
                style="float: right;"
                v-model="pageNo"
                :page-size-options="pageSizeOptions"
                :total="total"
                show-size-changer
                :page-size="pageSize"
                :showSizeChanger="true"
                :showQuickJumper="false"
                :show-total="showTotal"
                @showSizeChange="onShowSizeChange"
                @change="currentChage"
              >
              </a-pagination>
            </a-col>
          </a-row>
          <a-row v-else class="mem_list clearfix">
            <div class="no-data">
              <a-icon type="frown-o"/>
              暂无数据
            </div>
          </a-row>
        </div>
      </div>
    </div>
  </a-spin>
</template>

<script>
import '../../../public/css/style.css';
import { getAction } from '@/api/manage'
import { isShowBtn } from "@/utils/authFilter"

export default {
  name: 'StaffAndWorkers',
  beforeRouteEnter (to, from, next) {
    window.scrollTo(0, 0);
    next();
  },
  data () {
    return {
      confirmLoading: false,
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      pageNo: 1,
      pageSize: 10,
      total: 50,
      worksList: []
    };
  },
  created() {
    this.getWorksList()
  },
  methods: {
    isShowBtnPersson() {
      return isShowBtn()
    },
    addWorker() {
      this.$router.push('/worksShow/addWork')
    },
    onShowSizeChange(pageNo, pageSize) {
      this.pageNo = 1
			this.pageSize = pageSize
			this.getWorksList()
    },
    currentChage(page, pageSize) {
			this.pageSize = pageSize
			this.getWorksList()
    },
    showTotal(total, range) {
			return range[0] + "-" + range[1] + " 共" + total + "条"
		},
    getWorksList() {
      let self = this
      let params = {
        limit: self.pageSize,
        page: self.pageNo
      }
      if(this.articlType) {
        params.sort = this.articlType
      }
      this.confirmLoading = true
      getAction('/works/list', params).then(res => {
        if(res.code == 0) {
          self.worksList = [...res.result.list]
          self.pageNo = res.result.currPage
					self.total = res.result.totalCount
        } else {
          self.$message.error(res.msg)
        }
      }).finally(() => {
        self.confirmLoading = false
      })
    }
  }
};
</script>

<style lang="less" scoped>
  .no-data {
    color: rgba(0, 0, 0, .25);
    text-align: center;
    line-height: 64px;
    font-size: 16px;

    i {
      font-size: 24px;
      margin-right: 16px;
      position: relative;
      top: 3px;
    }
  }
</style>
